<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="New Factory From"></che-toolbar>

<md-content md-scroll-y flex md-theme="default">
  <md-progress-linear md-mode="indeterminate" class="create-factory-progress"
                      ng-show="createFactoryCtrl.isLoading"></md-progress-linear>
  <div class="create-factory" ng-hide="createFactoryCtrl.isLoading">
    <ng-form name="factoryNameForm">
      <!-- Name -->
      <che-input-box che-label-name="Name"
                     che-form="factoryNameForm"
                     che-name="name"
                     che-place-holder="Name of the factory"
                     aria-label="Name of the factory"
                     ng-model="createFactoryCtrl.name"
                     ng-trim
                     ng-minlength="3"
                     ng-maxlength="20"
                     ng-pattern="/^[ A-Za-z0-9_\-\.]+$/"
                     id="new-factory-name-input"
                     unique-factory-name="">
        <div ng-message="pattern">Factory name may contain digits, latin letters, spaces, _ , . , - and should start only with digits, latin letters or underscores</div>
        <div ng-message="minlength">The name has to be more than 3 characters long.</div>
        <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
        <div ng-message="uniqueFactoryName">This factory name is already used.</div>
      </che-input-box>
    </ng-form>
      <!--Factory source-->
      <che-label-container che-label-name="Source"
                           class="che-label-container-last">
        <md-tabs md-dynamic-height="true" md-stretch-tabs="auto" md-center-tabs="false" md-selected="selectedIndex"
                 md-border-bottom="true"
                 md-no-ink-bar
                 class="factory-select-source-details">
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent()">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-workspace-tab">Workspace</span>
            </md-tab-label>
            <md-tab-body>
              <cdvy-factory-from-workspace cdvy-factory-content="createFactoryCtrl.factoryContent"
                                           cdvy-is-loading="createFactoryCtrl.isLoading"
                                           cdvy-is-importing="createFactoryCtrl.isImporting"></cdvy-factory-from-workspace>
            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent()">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-git-tab">Git</span>
            </md-tab-label>
            <md-tab-body>
              <div layout="row" layout-align="start center" class="create-factory-git-content">
                <cdvy-create-factory-git cdvy-git-location="createFactoryCtrl.gitLocation" layout-fill
                                         layout-align="start start"></cdvy-create-factory-git>
              </div>
            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent()">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-config-tab">Config</span>
            </md-tab-label>
            <md-tab-body>
              <div layout-fill layout="row" layout-align="start center">
                <cdvy-factory-from-file cdvy-factory-content="createFactoryCtrl.factoryContent"
                                        cdvy-is-importing="createFactoryCtrl.isImporting" layout="column"
                                        flex></cdvy-factory-from-file>
              </div>
            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent(); templateSelected = true;"
                  md-on-deselect="templateSelected = false;">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-template-tab">Template</span>
            </md-tab-label>
            <md-tab-body>
              <div layout-fill layout="row" layout-align="start center" ng-if="templateSelected">
                <che-factory-from-template factory-content="createFactoryCtrl.factoryContent"
                                           is-importing="createFactoryCtrl.isImporting" layout="column"
                                           editor-state="createFactoryCtrl.editorState"
                                           flex></che-factory-from-template>
              </div>
            </md-tab-body>
          </md-tab>
        </md-tabs>
      </che-label-container>

      <!--button 'Create'-->
      <che-button-primary id="create-factory-next-button"
                          che-button-title="Create"
                          ng-click="createFactoryCtrl.createFactoryByContent(createFactoryCtrl.factoryContent)"
                          ng-disabled="createFactoryCtrl.isFormInvalid() || !createFactoryCtrl.factoryContent || createFactoryCtrl.isImporting || (!!createFactoryCtrl.editorState && !createFactoryCtrl.editorState.isValid)"></che-button-primary>

  </div>
</md-content>
